import React, { PureComponent } from 'react'
import { Table, Divider, notification, Popconfirm } from 'antd'
import { connect } from 'dva'
import styles from './List.less'
import { getValue } from '@/utils/utils'
// 部门管理列表
@connect(({ loading }) => ({
  loading: loading.models.account,
}))
export default class List extends PureComponent {
  // 清除选择
  cleanSelectedKeys = () => {
    this.handleSelectRows([])
  }

  // 行选事件
  handleSelectRows = rows => {
    const { dispatch } = this.props
    dispatch({
      type: 'account/updateState',
      payload: { selectedRowKeys: rows },
    })
  }

  // 编辑
  handleEditClick = record => {
    if (record.id) {
      this.props.dispatch({
        type: 'account/edit',
        payload: {
          id: record.id,
        },
      })
    } else {
      notification.error('没有选择记录')
    }
  }

  // 单条删除
  handleDeleteClick = record => {
    this.props.dispatch({
      type: 'account/remove',
      payload: {
        id: record.id,
      },
    })
  }

  // 表格动作触发事件
  handleListChange = (pg, filtersArg, sorter) => {
    const { dispatch, formValues, pagination } = this.props
    if (sorter.field && pagination.current === pg.current) {
      return
    }

    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj }
      newObj[key] = getValue(filtersArg[key])
      return newObj
    }, {})

    const params = {
      currentPage: pg.current,
      pageSize: pg.pageSize,
      ...formValues,
      ...filters,
    }

    dispatch({
      type: 'account/fetch',
      payload: params,
    })
  }

  render() {
    const { list, pagination, loading } = this.props

    const columns = [
      {
        render: (t, r, i) => i + 1,
        width: 30,
      },
      {
        title: '姓名',
        align: 'center',
        dataIndex: 'realityName',
        width: 140,
        sorter: (a, b) => a.realityName && a.realityName.localeCompare(b.realityName),
        sortDirections: ['descend', 'ascend'],
      },
      {
        title: '帐号',
        align: 'center',
        sorter: (a, b) => a.mobile && a.mobile.localeCompare(b.mobile),
        dataIndex: 'mobile',
        width: 130,
      },
      {
        title: '邮箱',
        align: 'center',
        width: 180,
        dataIndex: 'email',
      },
      {
        title: '是否上级',
        align: 'center',
        width: 80,
        render: (text, record) => <div>{record.leader === '1' ? '是' : '否'}</div>,
      },
      {
        title: '所属部门',
        align: 'center',
        width: 150,
        dataIndex: 'deptName',
      },
      {
        align: 'center',
        title: '操作',
        render: (text, record) => (
          <div>
            <a onClick={e => this.handleEditClick(record, e)}>编辑</a>
            <Divider type="vertical" />
            <Popconfirm
              title="确定要删除吗？"
              okText="确定"
              cancelText="取消"
              onConfirm={() => this.handleDeleteClick(record)}
            >
              <a>删除</a>
            </Popconfirm>
          </div>
        ),
      },
    ]

    const paginationProps = {
      ...pagination,
    }

    return (
      <div className={styles.standardTable}>
        <Table
          loading={loading}
          size="small"
          bordered
          dataSource={list}
          rowKey={record => record.id}
          pagination={paginationProps}
          columns={columns}
          onChange={this.handleListChange}
        />
      </div>
    )
  }
}
